<template>
    <div id="app" >
        <el-container >
            <el-header>
                <Top/>
            </el-header>
            <el-mian class="center">
                <el-tooltip class="item" effect="light" content="新建文件夹" placement="top-start">
                <el-button type="primary" icon="el-icon-plus" circle style="width:50px;height: 50px; position: fixed;margin-top: 5%;margin-left: 4%" @click="open()"></el-button>
                </el-tooltip>
                <el-card class="box-card" style="background-color: rgba(255,255,255,70%);color: #606266;cursor: pointer;margin: 20px 200px;margin-top:2%;border-radius: 5px;" v-for="d in collectDir">

                        <el-row gutter="10">
                            <div  @click="intoCollect(d.id,d.name,d.count,d.createTime)" style="font-size: 20px;font-weight: bolder">
                            <el-col span="6">{{d.name}}</el-col>
                            <el-col span="6" >{{d.count}}个内容</el-col>
                            <el-col span="6">{{d.createTime}}</el-col></div>
                            <el-col span="6"><el-button type="danger" plain @click="deleteDir(d.id)">删除</el-button></el-col>
                        </el-row>

                    <!--p style="margin-top: 5px" @click="intoCollect(d.id,d.name,d.count,d.createTime)"><strong>&nbsp&nbsp&nbsp&nbsp&nbsp{{d.name}}     &nbsp&nbsp&nbsp&nbsp {{d.count}}个作品&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp创建时间:{{d.createTime}}</strong></p>-->
                    <!--          <el-card shadow="always" style="background-color: #E2E2E2;">-->
                    <!--            <span style="font-size: 20px;font-weight: bolder">-->
                    <!--              <span style="margin: 10px 20px">标题</span>-->
                    <!--              <span style="margin: 10px 400px">作者</span>-->
                    <!--              <span style="margin: 10px 200px">创建时间</span>-->
                    <!--            </span>-->


                    <!--          </el-card>-->

                    <!--          <el-card style="background-color: #E2E2E2;margin-top: 5px;" v-for="c in collectContent">-->
                    <!--            <span style="font-weight: bold;font-size: 13px">-->
                    <!--            <span style="margin: 10px 20px">{{c.blogTitle}}</span>-->
                    <!--              <span style="margin: 10px 420px">{{c.nickname}}</span>-->
                    <!--              <span style="margin: 10px 200px">{{c.createTime}}</span>-->
                    <!--            </span>-->

                    <!--          </el-card>-->
                </el-card>



            </el-mian>
        </el-container>

    </div>
</template>
<script>
import Top from '@/components/Top.vue'
import Bottom from "@/components/Bottom.vue"
import SpecialTop from "@/components/SpecialTop"
import axios from "axios";
import '@/api/request'
export default {
    components: {
        Top,
        Bottom,
        SpecialTop
    },
    el: '#app',
    data: function () {
        return {
            collectDir:[],
            collectContent:[],
            value:''
        }
    },
    computed: {
        noMore () {
            return this.count >= 2000
        },
        disabled () {
            return this.loading || this.noMore
        }
    },
    methods:{
        queryByTime(){
            this.user="";
            this.blog="";
            this.type=4;
            console.log(this.blog)
            axios.get("http://localhost:8088/blog/queryByTime/"+this.key).then(response=>{
                if (response.data.code==1){
                    this.blog=response.data.data
                    console.log(this.content)
                    localStorage.blog=response.data.data;
                    console.log(this.blog);
                }
                else if (response.data.code!=1){
                    this.open1()
                }
            })
        },
        deleteornot() {
            this.$confirm('此操作将永久删除该收藏夹, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        open(){
            this.$prompt('请输入收藏夹名称', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {

                this.createDir(value)


            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },

        intoCollect(id,name,count,createTime){
            console.log("传到页面跳转要处理的id:"+id)
            console.log("跳转要处理的收藏夹名"+name)
            console.log("要处理的收藏夹收藏量"+count)
            console.log("要处理的收藏夹创建时间"+createTime)
            localStorage.setItem('id',id)
            localStorage.setItem('name',name)
            localStorage.setItem('count',count)
            localStorage.setItem('createTime',createTime)
            window.location.href="onecollect.html"




        },

        deleteDir(id){
            this.$confirm('此操作将永久删除收藏夹, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                axios.post("http://localhost:8088/collectDirectory/deleteById/"+id).then(response=>{
                    if (response.data.data){
                        this.findDir();

                    }

                });


                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
},

        createDir(value){
            console.log("create方法获取的文件夹名:"+ value)
            axios.post("http://localhost:8088/collectDirectory/newDir",value,{headers:{
                    'Content-Type':'application/json'
                }}).then(response=>{


                if (response.data.code==1){
                    this.findDir();
                    this.$message({
                        type: 'success',
                        message: '恭喜你！创建收藏夹:'+value+"成功！",
                        offset:100
                    });

                }else{
                    this.$message({
                        type:'warning',
                        message:response.data.msg,
                        offset:100
                    })

                }

            })



        },

        findDir(){
            axios.get("http://localhost:8088/collectDirectory/list").then(response=>{
                if (response.data.code==1){
                    this.collectDir=response.data.data
                    // this.collectDir.forEach(e=>{
                    //     var id=e.id
                    //     console.log("获取到的收藏夹id="+id)
                    //     // this.findContent(id)
                    // })

                    console.log(response.data.data)
                    console.log("获取到的收藏夹目录"+this.collectDir)
                }
            })

        },

        findContent(Id){
            axios.get("http://localhost:8088/collectContent/queryCollectContent/"+Id).then(response=>{
                if (response.data.code==1) {
                    this.collectContent = response.data.data
                    console.log(response.data.data)
                    console.log("获取到的收藏夹内容" + this.collectContent)
                }

            })




        },



    },




    created(){

        this.findDir()


    }
}
</script>
<style>
.box-card:hover{
    text-decoration: underline;
    border: 10px solid #DCDFE6;
}
.el-card{
    background-color: white;margin: 0 auto
}
.el-message {
    top: 100px !important;
}
</style>
